<template>
    <div class="detail-container">
      <van-nav-bar title="面经详情" left-text="返回" @click-left="$router.back()" />
      <div class="detail">
        <h3>{{ obj.stem }}</h3>
        <div class="meta">
          <span>{{ obj.createdAt }}</span>
          <span>|</span>
          <span>{{ obj.views }} 浏览量</span>
          <span>|</span>
          <span>{{ obj.likeCount }} 点赞数</span>
        </div>
        <div class="creator">
          <img :src="obj.avatar" alt="Creator Avatar" />
          <span>{{ obj.creator }}</span>
        </div>
        <div class="content" v-html="obj.content"></div>
      </div>
    </div>
  </template>

<script>
import axios from 'axios';

axios
export default {
name: 'HmDetial',
created() {
    this.getDetial(this.$route.query.id)
},
data() {
    return {
        obj: {}
    }
},
methods: {
    async getDetial(id) {
        try{
            const res = await axios({
            url: 'http://interview-api-t.itheima.net/h5/interview/show',
            method: 'get',
            params: {
                id
            }
        })
        console.log(res)
        this.obj = res.data.data
        }catch(err) {
            console.log(err)
        }
    }
}
}
</script>
<style scoped lang="less">
.detail-container {
  padding: 20px;
  background-color: #f9f9f9;
}

.detail {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h3 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #333;
}

.meta {
  font-size: 14px;
  color: #999;
  margin-bottom: 15px;

  span {
    margin-right: 5px;
  }
}

.creator {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    object-fit: cover;
  }

  span {
    font-size: 16px;
    color: #555;
  }
}

.content {
  font-size: 16px;
  color: #333;
  line-height: 1.6;
}
</style>